import { Component, Fragment } from "react";
import { Remarkable } from 'remarkable';
import EditInput from "./EditInput";


class MarkdownEditor extends Component{
    constructor(props){
        super(props);
        this.onInputChange = this.onInputChange.bind(this)
        // this.handleChange = this.handleChange.bind(this)
        // this.getRawMarkup = this.getRawMarkup.bind(this)
        this.state = {
            value:""
        }
        
        this.md = new Remarkable()
    }
   
    
    onInputChange(value){

        this.setState({
            value,
        })
        console.log("这是父组件的数据")
    }

    getRawMarkup() {
        return {
          __html: this.md.render(this.state.value)
        }
        // return this.md.render(this.state.value)
        // return this.state.value.split("").reverse().join("")
      }
    render(){
        return(
            <Fragment>
                <EditInput onMyInputChange={this.onInputChange}/>
                <hr/>
                <h2>output</h2>
                <div 
                // dangerouslySetInnerHTML={this.getRawMarkup()}
                style={ 
                    {border:"1px solid red",height:"100px",width:"200px"}} 
                    dangerouslySetInnerHTML={this.getRawMarkup()}
                >      
                </div>
            </Fragment>
            

        )
    }

}

export default MarkdownEditor